<script setup>
import { ref, watchEffect } from "vue";
import { useRoute } from "vue-router";
import { getAlbumInfo, getArtistAlbum } from "../../apis/user";
import { createWindow } from "../../utils/ipcRenderer";

const route = useRoute();

const data = ref();
const songs = ref([]);
const albumList = ref([]);

//获取专辑信息
const getInit = async () => {
  await getAlbumInfo({ id: route.query.id }).then((res) => {
    data.value = res.album;
    songs.value = res.songs;
  });

  await getArtistAlbum({ id: data.value.artist.id, limit: 6 }).then((res) => {
    albumList.value = res.hotAlbums;
  });
};

getInit();

const handleAlbum = (id) => {
  createWindow({
    windowName: "albumDetail",
    path: "albumDetail",
    width: 1200,
    height: 820,
    param: { id: id },
  });
};

watchEffect(() => {
  if (route.path == "/albumDetail") {
    getInit();
  }
});
</script>

<template>
  <header-bar title="专辑详情"></header-bar>
  <div class="wrapper">
    <detail-info :albumInfo="data"></detail-info>
    <div class="content">
      <el-scrollbar height="100%">
        <div class="list_wrap">
          <music-list  listInfo="" :songs="songs"></music-list>
        </div>
        <div class="recommend">
          <div class="song_list">
            <div class="title" style="font-size: 20px">更多推荐</div>
            <div class="item_wrap">
              <div
                @click="handleAlbum(item.id)"
                class="item"
                v-for="item in albumList"
                :key="item.id"
              >
                <div>
                  <!-- <img :src="item.blurPicUrl" alt="" /> -->
                  <el-image lazy :src="item.blurPicUrl+`${'?param=300y300'}}`">
                    <template #placeholder>
                      <div class="image-slot">
                        Loading<span class="dot">...</span>
                      </div>
                    </template>
                  </el-image>
                </div>
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
      </el-scrollbar>
    </div>
  </div>
</template>

<style scoped lang="scss">
.wrapper {
  display: flex;
  flex-direction: column;
  height: calc(100% - 60px);
  padding:30px 10px;
  .content {
    margin-top: 30px;
    padding: 30px 20px;
    height: calc(100vh - 330px);
  }
  .list_wrap {
  }
  .recommend {
    margin-top: 20px;
    // padding: 10px 30px;
  }
}
</style>
